<template>
	<view class="zzh-form">
		<view class="login-head">
			<image class="head-img" :src="getAvatar"></image>
		</view>
		<view class="login-body">
			<form class="login-form" @submit="formSubmit">
				<view class="uni-form-item zzh-form-item">
					<input class="item-input" type="number" name="mobile" v-model="loginData.mobile" placeholder="手机号码" placeholder-style="color:#e6e0e0;" maxlength="11" focus/>
				</view>
				<view class="uni-form-item zzh-form-item">
					<input class="item-input" type="text" name="password" v-model="loginData.password" password placeholder="密码" placeholder-style="color:#e6e0e0;" maxlength="20"/>
				</view>
				<view class="uni-form-item item-hint">
					<navigator url="../find-password/find-password">
						<view class="hint-title">忘记密码?</view>
					</navigator>
					<navigator url="../register/register">
						<view class="hint-title">立即注册</view>
					</navigator>
				</view>
				<view class="uni-form-item item-button">
					<button formType="submit" class="login-button" :disabled="submitButDisabled">立即登录</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	var  graceChecker = require("common/js/graceChecker.js");
	export default {
		data() {
			return {
				avatarMan:'',
				avatarWoman:'',
				userInfo:{},
				rule: [
					{name:"mobile", checkType : "notnull", checkRule:"",  errorMsg:"手机号码不能为空"},
					{name:"mobile", checkType : "phoneno", checkRule:"",  errorMsg:"请输入正确的手机号码"},
					{name:"password", checkType : "notnull", checkRule:"",  errorMsg:"密码不能为空"},
					{name:"password", checkType : "reg", checkRule:"^[^ ]+$",  errorMsg:"请输入正确的密码"}
				],
				loginData:{
					mobile:"",
					password:""
				},
				submitButDisabled:false,
			};
		},
		components: {
		},
		created() {
			this.userInfo = uni.getStorageSync('userInfo');
			this.avatarMan=this.$store.state.user.avatarMan;
			this.avatarWoman=this.$store.state.user.avatarWoman;
		},
		computed:{
			getAvatar(){
				let that = this;
				let avatar= that.userInfo.avatar?that.userInfo.avatar:(that.userInfo.gender==0?that.avatarWoman:that.avatarMan);
				return avatar;
			}
		},
		methods:{
			/**
			 * 登录方法
			 */
			formSubmit: function(e){
				//进行表单检查
				let that = this;
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, this.rule);
				if(checkRes){
					that.submitButDisabled = true;
 					that.$http.ajax({
						url:that.$http.adornUrl(that.$api.login),
						data:formData,
						method:"POST",
						showLoad:true,
						showMsg:true
					}).then(function(res){
						if(res.code == 0){
							uni.setStorageSync('token', res.token);
							uni.setStorageSync('userId', res.userId);
							uni.navigateBack({delta: 1});
						}else{
							that.submitButDisabled = false;
						}
					}).catch(function(err){that.submitButDisabled = false;})
				}else{
					uni.showToast({ title: graceChecker.error, icon: "none" });
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "common/css/login.scss";
</style>
